<template>
	<view class="mineInfo">
		<view class="top">
			<image :src="form.wxImg"></image>
			<button slot="value" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<u-icon name="reload" color="#3953b8"></u-icon><text>同步微信头像</text>
			</button>
		</view>

		<view class="main">
			<u--form ref="form" :model="form" labelPosition="left">
				<u-form-item label="用户名:" labelWidth="180rpx" prop="wxName" borderBottom style="position: relative !important;border: 1px solid red;">
					<input type="nickname" class="weui-input" placeholder="请输入用户名" :value="form.wxName" @blur="bindblur"
						@input="bindinput" style="padding: 10rpx;" />
					<view class="tip" v-if="form.wxName == '微信用户'">
						该名称已被占用
					</view>
				</u-form-item>
				<u-form-item v-if="check" label="联系公司：" labelWidth="180rpx" prop="companyName" borderBottom>
					<view style="padding: 10rpx;box-sizing: border-box;">
						{{form.companyLable || "暂无"}}
					</view>
				</u-form-item>
				<u-form-item v-if="check" label="手机号：" labelWidth="180rpx" prop="companyName" borderBottom>
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view style="padding: 10rpx;box-sizing: border-box;">
							{{form.companyPhone || "请获取手机号"}}
						</view>
						<view>
							<button open-type="getPhoneNumber" class="phone_button" @getphonenumber="getUserPhone"
								:style="{backgroundColor : accreditNum < 5 ? '#fff' : '#F2F2F2',color:accreditNum < 5 ? '#3953b8'  : '#979797'}"
								:disabled="(accreditNum >= 5)">
								{{btnTitle}}
							</button>
						</view>
					</view>
				</u-form-item>
				<u-form-item v-if="check" borderBottom>
					<view style="display: flex;">
						<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange" size="20">
							<u-checkbox v-for="(item, index) in checkboxList" :key="index" :name="item.name" iconSize="20">
							</u-checkbox>
						</u-checkbox-group>
						<view>我已仔细阅读并同意鹏城测试<text style="color: #479df2;" @click="open(0)">用户协议</text>及<text
								@click="open(1)" style="color: #479df2;">隐私政策</text></view>
					</view>
				</u-form-item>
				<button @click="formSubmit()" style="color: #fff;background-color: #3953b8;margin:40rpx 0;">保存</button>
			</u--form>
			<view class="version">
				版本号：{{version}}
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-toast ref="uSuccess"></u-toast>
			
			<!-- 弹出层 -->
			<u-popup :show="show" :round="30" @close="close">
				<view v-if="oneTwo" style="padding: 30rpx;height: 70vh;overflow-y: scroll;">
					<view style="padding:20rpx 0;font-size: 40rpx;">鹏城测试隐私政策</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">
						鹏城测试设有适用于所有用户并纳入用户协议的隐私声明。您应当在注册时阅读并决定是否接受隐私声明以更用鹏城测试服务，如您接受，您在作为鹏城测试用户期间将受其规定(及鹏城测试对隐私声明作出的任何修订)的约束。尊重用户个人隐私信息的私有性是鹏城测试的一贯原则，鹏城测试将通过技术手段、强化内部管理等办法充分保护用户的个人隐私信息，除法律或有法律赋予权限的政府部门要求或事先得到用户明确授权等原因外，鹏城测试保证不对外公开或向第三方诱露用户个人隐私信息，或用户在使用服务时存情的非公开内容。同时，为了运营和改善鹏城测试的技术与服务，鹏城测试将可能会自行收集使用或向第三方提供用户的非个人隐私信息，这将有助于鹏城测试向用户提供更好的用户体验和服务质量。
					</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">
						1.个人数据资料包括用户提交的真实姓名、地址、电了邮箱和联系电话等用户信息。在未经您同意之前鹏城测试不会将您的资料用于其它目的。</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">
						2.使用非个人信息。将通过您的IP地址来收集非个人化的信息，包括您的浏览墨性质、提作系统种类、给您提供接入服务的ISP的域名等，以优化在您计算机屏幕上显示的页面。通过收集上述信息，我们亦进行客流量统计，从而改进网站的管理和服务。
					</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">3.个人数据安全。鹏城测试采用安全性的服务器使用控制设备保护您的个人数据.</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">
						4.个人数据披露和限制利用。当国家机构依照法定程序要求鹏城测试披露个人资料时，鹏城测试将根据执法单位的要求或为公共安全目的提供个人资料。在此情况下被露的任何内容，鹏城测试不承担任何责任，鹏城测试在符合下列条件时，对个人资料进行必要范围以外利用:已取得您的同意:相应的法律及程序要求提供用户的个人瓷料。
					</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">
						5.在不幸发生个人信息安全事件后，鹏城测试将按照法律法规的要求通过邮件、电话、公式等方式向您告知:事件的基本情况及可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的途径等
					</view>
				</view>
				<view v-else style="padding: 30rpx;height: 70vh;overflow-y: scroll;">
					<view style="padding:20rpx 0;font-size: 40rpx;">鹏城测试用户协议</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">
						1.用户资格:鹏城测试用户若为个人，须为中华人民共和国法律规定的具有完全民事权利能力和民事行为能力，能够独立承担民事责任的自然人;用户若为企业或其他机构，须承诺是按照相关法律合法设立并有效存续的企业法人或其他机构，且已取得签订并履行本协议所需的各项授权和批准。如您不合资格，请不要使用或立即终止使用我们的服务。用户注册成功后，鹏城测试将给予您一个用户账号，该用户账号由用户负责保管:用户应当对以其用户账号进行的所有活动和事件负法律责任，用户承诺不得以任何方式利用鹏城测试直接或间接从事违反中国法律、以及社会公德的行为，鹏城测试有权对违反上述承诺的内容予以删除，您的鹏城测试帐户不得向其他方转让或出售。鹏城测试保留根据您的信用信息、经营情况、履约能力等判定是否中止或终止您帐户的权利
					</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">
						2.资料填写:为确保交易的正常进行，用户需向鹏城测试提供真实、有效的个人资料，并对此承担法律责任。如个人资料有任何变动 (包括但不限于补充、更正、删除等行为)
						，必须及时通知鹏城测试更新，否则用户因此造成的任何损失，鹏城测试不承担任何责任。</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">
						3.您直接注册或通过各类方式(包括但不限于参与活动、询价等)使用鹏城测试服务的行为，即视为您注册成为鹏城测试用户并已经接受本协议及其他服务条款鹏城测试的使用通过各种方式(包括但不限于网页公告、电子邮件、短信提醒等)
						作出的任何声明、通知、警示等内容视为本协议的一部分，用户如使用平台的网络服务，视为用户同意该等声明、通知、警示的内容。</view>
					<view style="line-height: 50rpx;font-size: 30rpx;">
						4.用户权利:用户在注册完成后可享受鹏城测试提供的服务，并有权自主选择产品。鹏城测试根据《中华人民共和国产品质量法》、《中华人民共和国合同法》等相关法律法规的规定提供产品及服务。</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import {
		UpdateUserInfo,
		GetUserInfo,
		AddWeChatPhone,
		GetWeChatPhone,
		GetWeChatPhoneCount
	} from '../../../api/user.js'
	export default {
		data() {
			return {
				code: '',
				form: {},
				// 协议
				show: false,
				oneTwo: '',
				checkboxValue: [],
				checkboxList: [{
					name: true,
					disabled: false
				}],
				check: true,
				version: "",
				wxversion: "",
				accreditNum: 0,
				agreeFlag: false,
				btnTitle: "立即授权"
			};
		},
		methods: {
			formSubmit() {
				if (!this.form.wxName) {
					this.$refs.uSuccess.show({
						message: '用户名不能为空',
						position: 'top'
					})
					return
				}
				if(this.form.wxName == '微信用户'){
					this.$refs.uSuccess.show({
						message: '该用户名不可用',
						position: 'top'
					})
					return
				}
				if (!this.form.companyPhone) {
					this.$refs.uSuccess.show({
						message: '请获取手机号',
					})
					return
				}
				if (this.checkboxValue[0] !== true) {
					this.$refs.uSuccess.show({
						message: '请阅读并勾选协议！',
					})
					return
				}
				//保存用户信息
				UpdateUserInfo({
					wxName: this.form.wxName,
					wxImg: this.form.wxImg,
					companyPhone: this.form.companyPhone,
					companyAddress: this.form.companyAddress,
					companyName: this.form.companyName,
				}).then((res) => {
					this.$refs.uSuccess.show({
						message: '保存成功！',
						type: 'success'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						});
					}, 1000)
				})
			},

			// 获取用户信息
			getUserInfo() {
				GetUserInfo().then((res) => {
					this.form = res
				})
			},

			//获取手机号授权次数
			getWeChatPhoneCount() {
				GetWeChatPhoneCount().then((res) => {
					console.log("手机号授权次数", res);
					this.accreditNum = Number(res)
					if (this.accreditNum >= 5) {
						this.btnTitle = "今日已达授权上限"
					} else {
						this.btnTitle = "立即授权"
					}
				})
			},

			//获取用户手机号
			getUserPhone(e) {
				console.log("手机code", e.detail.code);
				AddWeChatPhone().then() //授权次数加1
				if (e.detail.code) {
					this.getWeChatPhone({
						code: e.detail.code
					})
				} else {
					wx.showToast({
						title: '已取消授权',
						icon: "none",
						duration: 1500,
						mask: true
					})
					setTimeout(() => {
						this.getWeChatPhoneCount()
					}, 50)
				}
			},
			//保存手机号
			getWeChatPhone(params) {
				GetWeChatPhone(params).then((res) => {
					console.log("用户手机号", res);
					if (res.data && res.data == false) {
						wx.showToast({
							title: '手机号授权失败',
							icon: "none",
							duration: 1500,
							mask: true
						})
					} else {
						this.form.companyPhone = res
						wx.showToast({
							title: '手机号授权成功',
							icon: "none",
							duration: 1500,
							mask: true
						})
						UpdateUserInfo({
							companyPhone: this.form.companyPhone,
						}).then((res) => {
							console.log("更新手机号", res);
						})
					}
				})
			},

			//获取版本号
			getVersion() {
				//微信小程序方法获取版本号
				const accountInfo = wx.getAccountInfoSync();
				this.version = accountInfo.miniProgram.version; // 小程序 版本号
				console.log("微信小程序版本", this.version);
			},

			// 获取头像
			onChooseAvatar(e) {
				this.uploadFilePromise(e.detail.avatarUrl)
			},

			// 头像上传
			uploadFilePromise(avatarUrl) {
				//调后台接口上传图片  这里的avatarUrl拿到的是微信地址 
				uni.uploadFile({
					url: 'https://wechat.atptest.com:44387/api/PCApplet/UploadLargeFileOBS',
					filePath: avatarUrl,
					name: 'file',
					// header:{'Authorization':`Bearer ${this.token}`},
					success: uploadFileRes => {
						let res = JSON.parse(uploadFileRes.data);
						if (res.code === 200) {
							this.form.wxImg = res.data;
						}
					},
					fail: (error) => {
						console.log(error);
					}
				});
			},

			//昵称
			bindblur(e) {
				this.form.wxName = e.detail.value
			},
			bindinput(e) {
				this.form.wxName = e.detail.value
			},
			// 协议
			checkboxChange(n) {
				// console.log('change', n);
			},
			open(e) {
				this.oneTwo = e
				this.show = true
			},
			// 关闭弹出层
			close() {
				this.show = false
			},
			// check功能
			checkShow() {
				const _that = this
				uni.request({
					url: 'https://wechat.atptest.com:44387/api/PCApplet/GetWeChatOpen',
					method: 'GET',
					success(res) {
						if (res.data.code == 200) {
							_that.check = res.data.data
						}
					}
				})
			}
		},
		onShow() {
			this.checkShow()
			this.getUserInfo()
			this.getVersion()
			this.getWeChatPhoneCount()
		},
	}
</script>

<style lang="scss" scoped>
	.mineInfo {
		.top {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0 10px 20px;

			button {
				display: flex;
				font-size: 28rpx;
				color: #3953b8;
				border: 1px solid #3953b8;
				border-radius: 56rpx;
				margin-top: 30rpx;
			}

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}
		}
	
		.main{
			.u-form-item{
				position: relative !important;
			}
			.tip{
				position: absolute;
				left: 180rpx;
				bottom: 0;
				font-size: 20rpx;
				color: red;
			}
		}
	}

	.phone_button {
		height: 50rpx;
		font-size: 28rpx;
		color: #3953b8;
		border: 1px solid #3953b8;
		display: flex;
		align-items: center;
	}

	.version {
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		font-size: 24rpx;
		text-align: center;
	}

	/deep/.u-form-item__body {
		margin: 0 20rpx;
		position: relative;
	}

	/deep/.u-cell__body {
		padding: 20rpx !important;
	}

	// /deep/.u-form-item__body__right__message {
	// 	display: none;
	// }
</style>